<template>
  <a-card :bordered="false">
    <div style="margin-bottom: 20px">
      <p style="display: inline-block;font-weight: bold;font-size: 16px;color: #999999">调课管理</p>
      <p style="display: inline-block;font-weight: bold;font-size: 16px">></p>
      <p style="display: inline-block;font-weight: bold;font-size: 16px">行政调课</p>
    </div>
    <div style="background: #E9EDF6;width: 100%;height: 120px;padding: 20px;margin-bottom: 20px">
      <p class="cm-text1">操作提示：</p>
      <p class="cm-text1">1、选择课表中已安排课程的节次，拖动至需要调整的节次，在弹出框中选择原上课日期和新上课日期，即可提交调课申请。</p>
      <p class="cm-text1"> 2、合班上课或多媒体、实训室等上课场景只需调整上课日期即可，不能与同其他课程互换。请至少提前一天提出调课申请。</p>
    </div>

    <div class="man-lift">
        <a-row>
          <a-col :span="6">
            <div class="man-div">执行学期</div>
          </a-col>
          <a-col>
            <a-select style="width: 145px;display: inline-block" @change="hqxqmc">
              <a-select-option v-for="(item,index) in semesterData" :key="item.id" :value="item.xqmc">
                {{item.xqmc}}
              </a-select-option>
            </a-select>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="6">
            <div class="man-div">专业部</div>
          </a-col>
          <a-col>
            <a-select style="width: 145px" @change="hqzy">
              <a-select-option v-for="(item,index) in departmentData" :key="index.name" :value="item.id">
                {{item.yxmc}}
              </a-select-option>
            </a-select>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="6">
            <div class="man-div">专业</div>
          </a-col>
          <a-col>
            <a-select style="width: 145px" @change="hqbj">
              <a-select-option v-for="(item,index) in majorData" :key="index.name" :value="item.id">
                {{item.zymc}}
              </a-select-option>
            </a-select>
          </a-col>
        </a-row>

        <div style="width: 100%;height: 450px;margin-top: 20px;border: 1px solid rgb(222 222 222)">
          <div v-for="(item,index) in classData" >
            <p class="man-p" :class="{active:currentIndex === index}" @click="liClick(index,item)">{{item.xzbmc}}</p>
          </div>
        </div>

      </div>

    <div class="man-right">
      <div>
        <p style=" text-align:center;font-size: 18px;font-weight: bold;">软测一班 ( 2020-2021上学期 ) 排课</p>
      </div>
    <div class="class-table">
      <div class="table-wrapper">
        <div class="tabel-container">
            <table>
            <thead>
            <tr>
              <th>时间</th>
              <th v-for="(weekNum, weekIndex) in classTableData.courses.length" :key="weekIndex"> {{'星期' + digital2Chinese(weekIndex, 'week')}}</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(lesson, lessonIndex) in classTableData.lessons" :key="lessonIndex">
              <td>
                <p>{{'第' + digital2Chinese(lessonIndex) + "节"}}</p>
                <p class="period">{{ lesson }}</p>
              </td>

              <td v-for="(course, courseIndex) in classTableData.courses" :key="courseIndex" @click="scheduling">
                <p>{{classTableData.courses[courseIndex][lessonIndex]}}</p>
                <p style="color: #FC620E"></p>
              </td>
            </tr>
            </tbody>
          </table>
          <div class="table-div">午休</div>
          <table>
            <thead>

            </thead>
            <tbody>
            <tr v-for="(lesson, lessonIndex) in classTableDataS.lessonsS" :key="lessonIndex">
              <td>
                <p>{{'第' + digital2ChineseS(lessonIndex) + "节"}}</p>
                <p class="period">{{ lesson }}</p>
              </td>

              <td v-for="(course, courseIndex) in classTableDataS.coursesS" :key="courseIndex">
                <p>{{classTableDataS.coursesS[courseIndex][lessonIndex]}}</p>
                <p style="color: #FC620E"></p>
              </td>
            </tr>
            </tbody>
          </table>
          <div class="table-div">晚自习</div>
        </div>
      </div>
    </div>
    </div>

    <apply-model ref="applyModel"></apply-model>

  </a-card>
</template>
<script>
import '@/assets/couMan/universal.less'
import '@/assets/courses/classSchedule.less'
import applyModel from '@views/courseManagement/administrative/modules/applyModel'
import { IconFont } from '@/cas/ico'
import '@assets/less/generalStyle.less'
import { semester,majorS,major,classSchedule,classGrade,detail,classScheduleAdd,nodeSet,dellClass } from '@api/scheduling'
export default {
  data() {
    return {
      classData:[],
      majorData:[],
      semesterData:[],
      departmentData:[],
      // 接口所需Id
      jkid:'09d5e1e7f9b049008eee645c783a1d67',
      classTableData: {
        lessons: [
          '08:00-08:45',
          '09:00-09:45',
          '10:00-10:45',
          '11:00-11:45',
        ],
        courses: [
          ['外语', '高数', '体育', '政治'],
          ['语文', '高数', '外语', '历史',],
          ['数据库', '高级程序', '高级程序', '政治',],
          ['语文', '高数', '外语', '历史'],
          ['数据库', '算法', '高级程序', ''],
          ['', '', '', ''],
          ['', '', '', ''],
        ]
      },
      classTableDataS: {
        lessonsS: [
          '14:00-14:45',
          '15:00-15:45',
          '16:00-16:45',
          '17:00-17:45',
          '19:00-19:45',
        ],
        coursesS: [
          ['语文', '文学', '高级程序', '政治',''],
          ['语文', '高数', '外语', '历史',''],
          ['数据库', '高级程序', '高级程序', '政治',''],
          ['语文', '高数', '外语', '历史',''],
          ['数据库', '算法', '高级程序', '高级程序',''],
          ['', '', '', ''],
          ['', '', '', ''],
        ],
      },
    }
  },
  created() {
    this.getSemeList()
    this.getMajorSList()
    this.getMajorList()
    this.getClass()
    this.init()
  },
  components: {
    IconFont,
    applyModel
  },
  computed: {},
  methods: {
    scheduling(lessonIndex,courseIndex){
      let csData = {}
      // 周
      csData.week = courseIndex+1
      // 节
      csData.section = lessonIndex+1
      // 学期id
      csData.semid = this.dcsData.xqId
      // 教学班id
      csData.jxbId = this.dcsData.jxbid
      // 课程id
      csData.kcid
      //课程名称
      csData.kcName
      //排课id
      csData.pkid
      console.log(csData)
    },
    //学期
    getSemeList(){
      semester(this.jkid).then((res) =>{
        // console.log(res)
        this.semesterData = res.result
        // console.log(res.result)
      })
    },
    //学期获取
    hqxqmc(index,value){
      console.log(value.data.key)
      console.log(index)
      this.jsxqxx = index
      this.dcsData.xqId = value.data.key
    },
    //院系
    getMajorSList(){
      majorS(this.jkid).then((res) =>{
        // console.log(res)
        this.departmentData = res.result
        console.log(res.result)
      })
    },
    //专业
    getMajorList(value){
      var falId = ''
      falId = value
      major(this.jkid,falId).then((res) =>{
        // console.log(res)
        this.majorData = res.result
        console.log(res.result)
      })
    },
    //班级
    getClass(value){
      var specId = ''
      specId = value
      classGrade(this.jkid,specId).then((res) =>{
        // console.log(res)
        this.classData = res.result
      })
    },
    liClick(index,item){
      console.log(index,item)
      this.currentIndex = index
      this.jsbjxx = item
      console.log(this.jsbjxx)
    },
    async init(pkid){
      const _this = this
      _this.pkjData = []
      const res1 = await nodeSet()
      const res2 = await detail(pkid)
      const seectionData = res1.result.records.filter(item => item.status == 1)
      const kcxxData = res2.result.records
      console.log(seectionData)
      seectionData.forEach(function(item ,index, array){
        const tempObj = {
          id: item.id,
          sectionName: item.section,
          time : item.kssj.substr(0,5)+'-'+item.jssj.substr(0,5),
          terminalid: item.terminalid,
        }
        _this.pkjData.push(tempObj)
        // console.log(_this.pkjData)
      })
      //回显数据赋值
      console.log(kcxxData)
      kcxxData.forEach(function(item, index ,array){
        _this.pkjData[item.section-1][item.week-1] = item.kcmc+''+item.jsmc+''+item.jsxm
      })
      console.log(_this.pkjData)
    },
        // 课表明细
    hqzy(value){
      console.log(value)
      this.getMajorList(value)
    },
    hqbj(value){
      console.log(value)
      this.getClass(value)
    },
    digital2Chinese(num, identifier) {
      const character = ['一','二', '三', '四', '五', '六','日'];
      return identifier === 'week' && (num === 0 || num === 7) ? '一' : character[num];
    },
    digital2ChineseS(num, identifier) {
      const character = ['五', '六', '七', '八', '九'];
      return identifier === 'week' && (num === 0 || num === 7) ? '一' : character[num];
      if(this.classTableDataS.coursesS==''){
        this.jsName = ''
      }else {
        this.jsName = '教室101 李老师'
      }
    },
    scheduling(){
      this.$refs.applyModel.add()
      this.$refs.applyModel.title='申请调课'
    }
  }
}
</script>
<style scoped>

</style>
